<template>
  <div id="app">
    <van-search
      v-model="searchValue"
      placeholder="搜索商品名称"
      show-action
      @search="onSearch"
    >
      <template v-slot:action>
        <van-button type="primary" size="small" @click="onSearch">搜索</van-button>
      </template>
    </van-search>
    <van-cell-group>
      <van-cell title="历史记录" value-class="history-value"/>
      <van-cell v-for = " (item, index) in historyList" :key = "item.id">
        <template v-slot: right-icon>
          <van-icon name="cross" size="14" @click="removeHistory(index)"/>
        </template>
      </van-cell>
      <van-cell title="猜你想搜" value-class="guess-value"/>
      <van-cell
        v-for=" (item, index) in guessList"
        :key="index"
        value-class="guess-value"
        is-link
      />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 0,
      item: {},
      searchValue: "",
      historyList: ["云南白药牙膏"],
      guessList: [
        "手机桌面支架",
        "清风抽纸",
        "指甲刀",
        "家用地球仪",
        "快充数据线",
        "实用羽毛球拍"
      ]
    };
  },
  methods: {
    onSearch() {
      if (this.searchValue) {
        // 将搜索词添加到历史记录
        this.historyList.unshift(this.searchValue);
        this.searchValue = "";
      }
    },
    onHistoryClick(item) {
      // 处理点击历史记录的逻辑，这里可以跳转到搜索结果页等
      console.log("点击历史记录:", item);
    },
    removeHistory(index) {
      // 移除历史记录
      this.historyList.splice(index, 1);
    }
  }
};
</script>

<style>
.history-value {
  color: #999;
}

.guess-value {
  color: #999;
}
</style>
